<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>炫酷点名册</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5',
                        secondary: '#10B981',
                        accent: '#F59E0B',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            }
            .animate-roll {
                animation: roll 0.1s infinite;
            }
            .animate-pulse-slow {
                animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }
            .gradient-bg {
                background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.1), 0 10px 10px -5px rgba(79, 70, 229, 0.04);
            }
        }
        
        @keyframes roll {
            0% { transform: scale(1); opacity: 0.8; }
            50% { transform: scale(1.05); opacity: 1; }
            100% { transform: scale(1); opacity: 0.8; }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen font-sans text-dark">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-md fixed top-0 left-0 right-0 z-50 transition-all duration-300" id="navbar">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-random text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-primary">炫酷点名册</h1>
            </div>
            <div class="hidden md:flex items-center space-x-6">
                <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-100 transition-colors">
                    <i class="fa fa-moon-o text-gray-600"></i>
                </button>
                <button id="info-btn" class="p-2 rounded-full hover:bg-gray-100 transition-colors">
                    <i class="fa fa-info-circle text-gray-600"></i>
                </button>
            </div>
            <button class="md:hidden p-2 rounded-full hover:bg-gray-100 transition-colors">
                <i class="fa fa-bars text-gray-600"></i>
            </button>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 pt-24 pb-16">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- 左侧：学生名单管理 -->
            <div class="lg:col-span-1">
                <div class="bg-white rounded-xl shadow-lg p-6 h-full">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="text-xl font-bold flex items-center">
                            <i class="fa fa-users text-primary mr-2"></i>学生名单
                        </h2>
                        <span id="student-count" class="bg-primary/10 text-primary px-2 py-1 rounded-full text-sm font-medium">0人</span>
                    </div>
                    
                    <!-- 添加学生 -->
                    <div class="mb-6">
                        <div class="flex gap-2">
                            <input 
                                type="text" 
                                id="new-student" 
                                placeholder="输入学生姓名" 
                                class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all"
                            >
                            <button 
                                id="add-student" 
                                class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-all flex items-center"
                            >
                                <i class="fa fa-plus mr-1"></i> 添加
                            </button>
                        </div>
                        <div class="flex gap-2 mt-3">
                            <button id="import-students" class="flex-1 bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg transition-all text-sm flex items-center justify-center">
                                <i class="fa fa-file-text-o mr-1"></i> 批量导入
                            </button>
                            <button id="clear-all" class="flex-1 bg-red-50 hover:bg-red-100 text-red-600 px-4 py-2 rounded-lg transition-all text-sm flex items-center justify-center">
                                <i class="fa fa-trash-o mr-1"></i> 清空
                            </button>
                        </div>
                    </div>
                    
                    <!-- 学生列表 -->
                    <div>
                        <h3 class="font-semibold text-gray-600 mb-3 flex items-center">
                            <i class="fa fa-list-ul mr-2"></i>当前名单
                        </h3>
                        <div id="student-list" class="max-h-[400px] overflow-y-auto pr-2 space-y-2">
                            <div class="text-gray-500 text-center py-10 border border-dashed border-gray-300 rounded-lg">
                                <i class="fa fa-info-circle mb-2 text-gray-400"></i>
                                <p>请添加学生到名单中</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 右侧：点名区域和历史记录 -->
            <div class="lg:col-span-2 space-y-8">
                <!-- 点名区域 -->
                <div class="gradient-bg rounded-xl shadow-xl p-6 md:p-8 relative overflow-hidden">
                    <!-- 装饰元素 -->
                    <div class="absolute top-0 left-0 w-full h-full overflow-hidden opacity-10">
                        <i class="fa fa-star absolute text-white text-4xl" style="top: 10%; left: 5%;"></i>
                        <i class="fa fa-star absolute text-white text-2xl" style="top: 20%; left: 80%;"></i>
                        <i class="fa fa-star absolute text-white text-3xl" style="top: 70%; left: 10%;"></i>
                        <i class="fa fa-star absolute text-white text-xl" style="top: 80%; left: 90%;"></i>
                        <i class="fa fa-star absolute text-white text-2xl" style="top: 40%; left: 50%;"></i>
                    </div>
                    
                    <h2 class="text-2xl font-bold text-white mb-6 relative z-10">
                        <i class="fa fa-random mr-2"></i>随机点名
                    </h2>
                    
                    <div class="bg-white/10 backdrop-blur-md rounded-lg p-6 md:p-8 relative z-10">
                        <!-- 名字显示区域 -->
                        <div id="display-area" class="h-40 md:h-56 flex items-center justify-center mb-6">
                            <p id="name-display" class="text-[clamp(2rem,5vw,4rem)] font-bold text-white text-center text-shadow transition-all">
                                准备就绪
                            </p>
                        </div>
                        
                        <!-- 控制按钮 -->
                        <div class="flex flex-wrap gap-4 justify-center">
                            <button 
                                id="start-roll" 
                                class="bg-white text-primary hover:bg-gray-100 px-6 py-3 rounded-lg font-semibold transition-all flex items-center disabled:opacity-50 disabled:cursor-not-allowed"
                                disabled
                            >
                                <i class="fa fa-play mr-2"></i> 开始点名
                            </button>
                            <button 
                                id="stop-roll" 
                                class="bg-accent text-white hover:bg-amber-500 px-6 py-3 rounded-lg font-semibold transition-all flex items-center hidden"
                            >
                                <i class="fa fa-stop mr-2"></i> 停止
                            </button>
                            <button 
                                id="reset-roll" 
                                class="bg-gray-700/80 text-white hover:bg-gray-700 px-6 py-3 rounded-lg font-semibold transition-all flex items-center disabled:opacity-50 disabled:cursor-not-allowed"
                                disabled
                            >
                                <i class="fa fa-refresh mr-2"></i> 重新开始
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 点名设置 -->
                <div class="bg-white rounded-xl shadow-lg p-6">
                    <h2 class="text-xl font-bold mb-4 flex items-center">
                        <i class="fa fa-sliders text-primary mr-2"></i>点名设置
                    </h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-gray-600 mb-2 font-medium">滚动速度</label>
                            <div class="flex items-center gap-3">
                                <i class="fa fa-tachometer text-gray-400"></i>
                                <input 
                                    type="range" 
                                    id="roll-speed" 
                                    min="50" 
                                    max="300" 
                                    value="100" 
                                    class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary"
                                >
                                <span id="speed-value" class="text-gray-600 font-medium">中等</span>
                            </div>
                        </div>
                        <div>
                            <label class="block text-gray-600 mb-2 font-medium">动画效果</label>
                            <select id="animation-type" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none">
                                <option value="roll">滚动效果</option>
                                <option value="fade">淡入淡出</option>
                                <option value="bounce">弹跳效果</option>
                            </select>
                        </div>
                    </div>
                </div>
                
                <!-- 点名历史 -->
                <div class="bg-white rounded-xl shadow-lg p-6">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-xl font-bold flex items-center">
                            <i class="fa fa-history text-primary mr-2"></i>点名历史
                        </h2>
                        <button id="clear-history" class="text-gray-500 hover:text-red-500 text-sm transition-colors">
                            <i class="fa fa-trash-o mr-1"></i> 清空历史
                        </button>
                    </div>
                    
                    <div id="history-list" class="space-y-3 max-h-60 overflow-y-auto pr-2">
                        <div class="text-gray-500 text-center py-10 border border-dashed border-gray-300 rounded-lg">
                            <i class="fa fa-clock-o mb-2 text-gray-400"></i>
                            <p>暂无点名记录</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 批量导入模态框 -->
    <div id="import-modal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center hidden">
        <div class="bg-white rounded-xl shadow-2xl p-6 w-full max-w-md mx-4 transform transition-all">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-bold text-gray-800">批量导入学生</h3>
                <button id="close-modal" class="text-gray-500 hover:text-gray-700">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <p class="text-gray-600 mb-4 text-sm">请输入学生姓名，每行一个</p>
            <textarea 
                id="bulk-students" 
                class="w-full h-40 p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none resize-none text-sm"
                placeholder="张三&#10;李四&#10;王五&#10;..."
            ></textarea>
            <div class="flex justify-end gap-3 mt-4">
                <button id="cancel-import" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
                    取消
                </button>
                <button id="confirm-import" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                    导入
                </button>
            </div>
        </div>
    </div>

    <!-- 信息提示模态框 -->
    <div id="info-modal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center hidden">
        <div class="bg-white rounded-xl shadow-2xl p-6 w-full max-w-md mx-4 transform transition-all">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-bold text-gray-800">关于点名册</h3>
                <button id="close-info" class="text-gray-500 hover:text-gray-700">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="text-gray-600 space-y-3 text-sm">
                <p><i class="fa fa-info-circle text-primary mr-2"></i> 这是一个炫酷的随机点名工具，适用于课堂、会议等场景</p>
                <p><i class="fa fa-check-circle text-secondary mr-2"></i> 支持添加、删除学生，以及批量导入功能</p>
                <p><i class="fa fa-magic text-accent mr-2"></i> 多种动画效果可选，让点名过程更加生动有趣</p>
                <p><i class="fa fa-history text-gray-500 mr-2"></i> 自动记录点名历史，方便查看</p>
            </div>
            <div class="mt-4 text-center">
                <button id="got-it" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                    知道了
                </button>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 py-6">
        <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
            <p>© 2023 炫酷点名册 | 让点名变得更有趣</p>
        </div>
    </footer>

    <script>
        // 全局状态管理
        const state = {
            students: [],
            isRolling: false,
            rollInterval: null,
            rollSpeed: 100, // 毫秒
            animationType: 'roll',
            history: []
        };

        // DOM 元素
        const elements = {
            newStudentInput: document.getElementById('new-student'),
            addStudentBtn: document.getElementById('add-student'),
            studentList: document.getElementById('student-list'),
            studentCount: document.getElementById('student-count'),
            startRollBtn: document.getElementById('start-roll'),
            stopRollBtn: document.getElementById('stop-roll'),
            resetRollBtn: document.getElementById('reset-roll'),
            nameDisplay: document.getElementById('name-display'),
            rollSpeedSlider: document.getElementById('roll-speed'),
            speedValue: document.getElementById('speed-value'),
            animationType: document.getElementById('animation-type'),
            historyList: document.getElementById('history-list'),
            clearAllBtn: document.getElementById('clear-all'),
            clearHistoryBtn: document.getElementById('clear-history'),
            importStudentsBtn: document.getElementById('import-students'),
            importModal: document.getElementById('import-modal'),
            closeModalBtn: document.getElementById('close-modal'),
            bulkStudentsTextarea: document.getElementById('bulk-students'),
            confirmImportBtn: document.getElementById('confirm-import'),
            cancelImportBtn: document.getElementById('cancel-import'),
            infoBtn: document.getElementById('info-btn'),
            infoModal: document.getElementById('info-modal'),
            closeInfoBtn: document.getElementById('close-info'),
            gotItBtn: document.getElementById('got-it'),
            navbar: document.getElementById('navbar')
        };

        // 初始化应用
        function init() {
            // 从本地存储加载数据
            loadFromLocalStorage();
            
            // 更新UI
            renderStudentList();
            updateStudentCount();
            renderHistory();
            updateControlButtons();
            
            // 绑定事件监听器
            bindEvents();
        }

        // 绑定事件处理函数
        function bindEvents() {
            // 添加学生
            elements.addStudentBtn.addEventListener('click', addStudent);
            elements.newStudentInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') addStudent();
            });
            
            // 开始点名
            elements.startRollBtn.addEventListener('click', startRolling);
            
            // 停止点名
            elements.stopRollBtn.addEventListener('click', stopRolling);
            
            // 重新开始
            elements.resetRollBtn.addEventListener('click', resetRoll);
            
            // 调整滚动速度
            elements.rollSpeedSlider.addEventListener('input', (e) => {
                state.rollSpeed = 350 - e.target.value; // 反转值，让滑块右侧代表更快
                updateSpeedText();
            });
            
            // 选择动画类型
            elements.animationType.addEventListener('change', (e) => {
                state.animationType = e.target.value;
                // 如果正在滚动，重新应用动画
                if (state.isRolling) {
                    stopRolling(false);
                    startRolling();
                }
            });
            
            // 清空所有学生
            elements.clearAllBtn.addEventListener('click', clearAllStudents);
            
            // 清空历史记录
            elements.clearHistoryBtn.addEventListener('click', clearHistory);
            
            // 批量导入相关
            elements.importStudentsBtn.addEventListener('click', () => {
                elements.importModal.classList.remove('hidden');
            });
            
            elements.closeModalBtn.addEventListener('click', () => {
                elements.importModal.classList.add('hidden');
                elements.bulkStudentsTextarea.value = '';
            });
            
            elements.cancelImportBtn.addEventListener('click', () => {
                elements.importModal.classList.add('hidden');
                elements.bulkStudentsTextarea.value = '';
            });
            
            elements.confirmImportBtn.addEventListener('click', importBulkStudents);
            
            // 信息模态框
            elements.infoBtn.addEventListener('click', () => {
                elements.infoModal.classList.remove('hidden');
            });
            
            elements.closeInfoBtn.addEventListener('click', () => {
                elements.infoModal.classList.add('hidden');
            });
            
            elements.gotItBtn.addEventListener('click', () => {
                elements.infoModal.classList.add('hidden');
            });
            
            // 滚动时导航栏效果
            window.addEventListener('scroll', () => {
                if (window.scrollY > 10) {
                    elements.navbar.classList.add('py-2', 'shadow-lg');
                    elements.navbar.classList.remove('py-3', 'shadow-md');
                } else {
                    elements.navbar.classList.add('py-3', 'shadow-md');
                    elements.navbar.classList.remove('py-2', 'shadow-lg');
                }
            });
        }

        // 添加学生
        function addStudent() {
            const name = elements.newStudentInput.value.trim();
            if (name && !state.students.includes(name)) {
                state.students.push(name);
                elements.newStudentInput.value = '';
                renderStudentList();
                updateStudentCount();
                updateControlButtons();
                saveToLocalStorage();
            } else if (state.students.includes(name)) {
                showNotification('该学生已在名单中', 'warning');
            }
        }

        // 从列表中删除学生
        function deleteStudent(name) {
            state.students = state.students.filter(student => student !== name);
            renderStudentList();
            updateStudentCount();
            updateControlButtons();
            saveToLocalStorage();
        }

        // 渲染学生列表
        function renderStudentList() {
            if (state.students.length === 0) {
                elements.studentList.innerHTML = `
                    <div class="text-gray-500 text-center py-10 border border-dashed border-gray-300 rounded-lg">
                        <i class="fa fa-info-circle mb-2 text-gray-400"></i>
                        <p>请添加学生到名单中</p>
                    </div>
                `;
                return;
            }
            
            elements.studentList.innerHTML = '';
            state.students.forEach(student => {
                const studentEl = document.createElement('div');
                studentEl.className = 'flex justify-between items-center bg-gray-50 p-3 rounded-lg card-hover';
                studentEl.innerHTML = `
                    <span class="font-medium">${student}</span>
                    <button class="delete-btn text-gray-400 hover:text-red-500 transition-colors" data-name="${student}">
                        <i class="fa fa-times"></i>
                    </button>
                `;
                elements.studentList.appendChild(studentEl);
            });
            
            // 为删除按钮添加事件
            document.querySelectorAll('.delete-btn').forEach(btn => {
                btn.addEventListener('click', (e) => {
                    deleteStudent(e.currentTarget.dataset.name);
                });
            });
        }

        // 更新学生计数
        function updateStudentCount() {
            elements.studentCount.textContent = `${state.students.length}人`;
        }

        // 开始点名
        function startRolling() {
            if (state.students.length < 1) return;
            
            state.isRolling = true;
            updateControlButtons();
            
            // 清除之前的动画类
            elements.nameDisplay.className = 'text-[clamp(2rem,5vw,4rem)] font-bold text-white text-center text-shadow transition-all';
            
            // 根据选择的动画类型应用不同效果
            if (state.animationType === 'roll') {
                elements.nameDisplay.classList.add('animate-roll');
            } else if (state.animationType === 'fade') {
                elements.nameDisplay.classList.add('transition-opacity', 'duration-100');
            }
            
            // 开始滚动名字
            state.rollInterval = setInterval(() => {
                const randomIndex = Math.floor(Math.random() * state.students.length);
                const randomName = state.students[randomIndex];
                
                // 淡入淡出动画处理
                if (state.animationType === 'fade') {
                    elements.nameDisplay.style.opacity = '0';
                    setTimeout(() => {
                        elements.nameDisplay.textContent = randomName;
                        elements.nameDisplay.style.opacity = '1';
                    }, 50);
                } else if (state.animationType === 'bounce') {
                    elements.nameDisplay.textContent = randomName;
                    elements.nameDisplay.style.transform = 'scale(1.1)';
                    setTimeout(() => {
                        elements.nameDisplay.style.transform = 'scale(1)';
                    }, 50);
                } else {
                    elements.nameDisplay.textContent = randomName;
                }
            }, state.rollSpeed);
        }

        // 停止点名
        function stopRolling(recordHistory = true) {
            if (!state.isRolling) return;
            
            clearInterval(state.rollInterval);
            state.isRolling = false;
            
            // 移除动画类
            elements.nameDisplay.classList.remove('animate-roll', 'transition-opacity', 'duration-100');
            elements.nameDisplay.style.transform = 'scale(1)';
            elements.nameDisplay.style.opacity = '1';
            
            // 如果需要记录历史，添加到历史记录
            if (recordHistory) {
                const selectedName = elements.nameDisplay.textContent;
                addToHistory(selectedName);
                
                // 添加选中动画
                elements.nameDisplay.classList.add('animate-pulse-slow');
                setTimeout(() => {
                    elements.nameDisplay.classList.remove('animate-pulse-slow');
                }, 2000);
            }
            
            updateControlButtons();
        }

        // 重新开始点名
        function resetRoll() {
            elements.nameDisplay.textContent = '准备就绪';
            elements.nameDisplay.classList.remove('animate-pulse-slow');
            updateControlButtons();
        }

        // 更新控制按钮状态
        function updateControlButtons() {
            const hasStudents = state.students.length > 0;
            const isRolling = state.isRolling;
            const hasSelected = elements.nameDisplay.textContent !== '准备就绪';
            
            elements.startRollBtn.disabled = !hasStudents || isRolling;
            elements.stopRollBtn.classList.toggle('hidden', !isRolling);
            elements.resetRollBtn.disabled = !hasSelected || isRolling;
        }

        // 更新速度显示文本
        function updateSpeedText() {
            let speedText;
            if (state.rollSpeed > 200) {
                speedText = '慢速';
            } else if (state.rollSpeed > 100) {
                speedText = '中等';
            } else {
                speedText = '快速';
            }
            elements.speedValue.textContent = speedText;
        }

        // 添加到历史记录
        function addToHistory(name) {
            const now = new Date();
            const timeString = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
            
            state.history.unshift({
                name,
                time: timeString
            });
            
            // 限制历史记录数量
            if (state.history.length > 20) {
                state.history.pop();
            }
            
            renderHistory();
            saveToLocalStorage();
        }

        // 渲染历史记录
        function renderHistory() {
            if (state.history.length === 0) {
                elements.historyList.innerHTML = `
                    <div class="text-gray-500 text-center py-10 border border-dashed border-gray-300 rounded-lg">
                        <i class="fa fa-clock-o mb-2 text-gray-400"></i>
                        <p>暂无点名记录</p>
                    </div>
                `;
                return;
            }
            
            elements.historyList.innerHTML = '';
            state.history.forEach((item, index) => {
                const historyItem = document.createElement('div');
                historyItem.className = `flex justify-between items-center p-3 rounded-lg ${index === 0 ? 'bg-primary/5 border-l-4 border-primary' : 'bg-gray-50'}`;
                historyItem.innerHTML = `
                    <div>
                        <span class="font-medium ${index === 0 ? 'text-primary' : ''}">${item.name}</span>
                        ${index === 0 ? '<span class="ml-2 bg-primary/10 text-primary text-xs px-2 py-0.5 rounded-full">最新</span>' : ''}
                    </div>
                    <span class="text-gray-500 text-sm">${item.time}</span>
                `;
                elements.historyList.appendChild(historyItem);
            });
        }

        // 清空所有学生
        function clearAllStudents() {
            if (state.students.length === 0) return;
            
            if (confirm('确定要清空所有学生吗？')) {
                state.students = [];
                renderStudentList();
                updateStudentCount();
                updateControlButtons();
                saveToLocalStorage();
                showNotification('已清空所有学生', 'success');
            }
        }

        // 清空历史记录
        function clearHistory() {
            if (state.history.length === 0) return;
            
            if (confirm('确定要清空点名历史吗？')) {
                state.history = [];
                renderHistory();
                saveToLocalStorage();
                showNotification('已清空点名历史', 'success');
            }
        }

        // 批量导入学生
        function importBulkStudents() {
            const text = elements.bulkStudentsTextarea.value.trim();
            if (!text) return;
            
            const names = text.split('\n')
                .map(name => name.trim())
                .filter(name => name);
            
            if (names.length === 0) return;
            
            // 添加新学生，避免重复
            let newCount = 0;
            names.forEach(name => {
                if (!state.students.includes(name)) {
                    state.students.push(name);
                    newCount++;
                }
            });
            
            elements.importModal.classList.add('hidden');
            elements.bulkStudentsTextarea.value = '';
            
            renderStudentList();
            updateStudentCount();
            updateControlButtons();
            saveToLocalStorage();
            
            showNotification(`成功导入 ${newCount} 名学生`, 'success');
        }

        // 显示通知
        function showNotification(message, type = 'info') {
            // 创建通知元素
            const notification = document.createElement('div');
            notification.className = `fixed top-20 right-4 px-4 py-3 rounded-lg shadow-lg z-50 transform transition-all duration-300 translate-x-full`;
            
            // 设置通知样式
            let bgColor, textColor, icon;
            switch (type) {
                case 'success':
                    bgColor = 'bg-green-50';
                    textColor = 'text-green-700';
                    icon = 'fa-check-circle';
                    break;
                case 'warning':
                    bgColor = 'bg-yellow-50';
                    textColor = 'text-yellow-700';
                    icon = 'fa-exclamation-circle';
                    break;
                case 'error':
                    bgColor = 'bg-red-50';
                    textColor = 'text-red-700';
                    icon = 'fa-times-circle';
                    break;
                default:
                    bgColor = 'bg-blue-50';
                    textColor = 'text-blue-700';
                    icon = 'fa-info-circle';
            }
            
            notification.classList.add(bgColor, textColor);
            notification.innerHTML = `<i class="fa ${icon} mr-2"></i>${message}`;
            
            // 添加到页面
            document.body.appendChild(notification);
            
            // 显示通知
            setTimeout(() => {
                notification.classList.remove('translate-x-full');
                notification.classList.add('translate-x-0');
            }, 10);
            
            // 3秒后隐藏通知
            setTimeout(() => {
                notification.classList.remove('translate-x-0');
                notification.classList.add('translate-x-full');
                
                // 移除元素
                setTimeout(() => {
                    document.body.removeChild(notification);
                }, 300);
            }, 3000);
        }

        // 保存数据到本地存储
        function saveToLocalStorage() {
            localStorage.setItem('rollCallStudents', JSON.stringify(state.students));
            localStorage.setItem('rollCallHistory', JSON.stringify(state.history));
        }

        // 从本地存储加载数据
        function loadFromLocalStorage() {
            const savedStudents = localStorage.getItem('rollCallStudents');
            const savedHistory = localStorage.getItem('rollCallHistory');
            
            if (savedStudents) {
                state.students = JSON.parse(savedStudents);
            }
            
            if (savedHistory) {
                state.history = JSON.parse(savedHistory);
            }
        }

        // 初始化应用
        document.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>
